<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="Bookmark" href="/static/admin/image/logo.ico">
    <link rel="Shortcut Icon" href="/static/admin/image/logo.ico" />
    <script src="/static/admin/layui/layui.js" charset="utf-8"></script>

    <title>网站管理平台</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body,
    #warp {
        width: 100%;
        height: 100%;
    }

    #warp {
        background: url(/static/admin/image/bg.png);
        position: relative;
        overflow: hidden;
    }

    .container {
        width: 1300px;
        margin: 0 auto;
        position: relative;
        height: 100%;
    }

    .contbox {
        width: 50%;
        height: 100%;
        float: left;
    }

    #loginbox {
        width: 500px;
        right: 100px;
        background-color: #fff;
        margin: 0 auto;
        transform: translateY(-50%);
        padding-bottom: 25px;
    }

    .imgbox {
        background: url(/static/admin/image/picture.png) no-repeat;
        background-size: 100%;
        width: 548px;
        height: 400px;
        margin: 0 auto;
        transform: translateY(-20%);
    }

    #loginbox,
    .imgbox {
        margin-top: 50%;
    }

    .logo {
        padding: 70px 0 5px 0;
        width: 100%;
    }

    .logo div {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: url(/static/admin/image/logo.png) no-repeat;
        background-size: 100%;
        margin: 0 auto;
    }

    .cont_r {
        text-align: center;
    }

    .title {
        color: #3f9aef;
        padding: 15px 0 25px 0;
        font-size: 30px;
    }

    .inputbox {
        width: 60%;
        margin: 0 auto;
        overflow: hidden;
        font-size: 14px;
    }

    .inputbox .name,
    .inputbox img,
    .inputbox .box,
    .inputbox input {
        float: left;
    }

    .inputbox {
        height: 40px;
        line-height: 40px;
        border: 1px solid #3f9aef;
    }

    .inputbox .name {
        color: #c1c1c1;
    }

    .inputbox img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        margin-top: 10px;
    }

    .inputbox .box {
        padding: 0 10px;
    }

    .inputbox input {
        margin-top: 10px;
        border: 0;
        height: 20px;
        outline: none;
    }

    .user {
        margin-top: 40px;
        margin-bottom: 25px;
    }

    .pwd {
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .yzmbox {
        width: 60%;
        margin: 0 auto;
        overflow: hidden;
    }

    .yzm {
        width: 100px;
        height: 40px;
        line-height: 40px;
        margin-top: 15px;
        margin-bottom: 40px;
        border: 1px solid #3f9aef;
        float: left;
        margin-right: 20px;
    }

    .yzm input {
        width: 80px;
        margin-top: 5px;
        border: 0;
        height: 20px;
        outline: none;
        padding: 0 10px;
    }
    .yzm a{
        float:  left;
    }
    button {
        width: 60%;
        height: 40px;
        border: 0;
        background-color: #3f9aef;
        color: #fff;
        border-radius: 10px;
    }
    .layui-fixbar{
        display:    none;
    }
</style>

<body>
<div id="warp">
    <div class="container">
        <div class="cont_l contbox">
            <div class="imgbox"></div>
        </div>
        <div class="cont_r contbox">
            <div id="loginbox">
                <form class="form form-horizontal layui-form">
                    <div class="logo">
                        <div></div>
                    </div>
                    <h3 class="title">网站管理平台</h3>
                    <div class="user inputbox">
                        <div class="box">
                            <img src="/static/admin/image/user.png" alt="">
                            <div class="name">用户名：</div>
                        </div>
                        <input type="text" name="username" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                    <div class="pwd inputbox">
                        <div class="box">
                            <img src="/static/admin/image/pwd.png" alt="">
                            <div class="name">密&nbsp;&nbsp;&nbsp;码：</div>
                        </div>
                        <input id="" name="password" required lay-verify="required" type="password" placeholder="" class="input-text size-L">
                    </div>
                    <div class="yzmbox">
                        <div class="yzm">
                            <input type="text" required lay-verify="required" placeholder="验证码" name="verify">
                        </div>
                        <div class="yzm">
                            <img id="verify_img" src="{:captcha_src()}" alt="看不清换一张" onclick="refreshVerify()" style="width: 100%;height: 100%">
                            <a href="javascript:refreshVerify()"></a>
                        </div>
                    </div>
                    <button class="btn btn-success radius size-L" lay-submit lay-filter="formDemo">登陆</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    function refreshVerify() {
        var ts = Date.parse(new Date()) / 1000;
        var img = document.getElementById('verify_img');
        img.src = "/captcha?id=" + ts;
    }
    layui.use(['layer', 'form'], function() {
        var $ = layui.$, //重点处
            layer = layui.layer,
            form = layui.form;
        form.on('submit(formDemo)', function(data) {
            $.ajax({
                type: "post",
                url: "{:url('Login/dologin')}",
                data: data.field,
                success: function(data) {
                    var sj = JSON.parse(data);
                    if (sj.status == '201') {
                        layer.msg(sj.msg);
                    } else if (sj.status == '200') {
                        location.href = "{:url('article/index')}";
                    }
                }
            });
            return false;
        });

    });
</script>

</html>